<template>
  <div class="box-wrap">
    <div class="box" v-for="(item, index) in list" :key="index" :style="item">
      {{ index + 1 }}
    </div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {},
  mounted() {
    for (var i = 0; i < 10; i++) {
      let w = 100
      let h = Math.random() * 100 + 100
      let style = {
        width: w + 'px',
        height: h + 'px'
      }
      this.list.push(style)
    }
  }
}
</script>
<style type="text/css">
.box {
  border: 1px solid #000;
  align-self: center;
}
.box-wrap {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
}
</style>
